<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>我的订单</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
  <style>
    :root {
      --primary-color: #07c160;
      --secondary-color: #f8f8f8;
      --text-color: #333;
      --light-text: #666;
      --border-color: #eaeaea;
      --success-color: #07c160;
      --danger-color: #fa5151;
      --warning-color: #ffc300;
    }
    
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
      color: var(--text-color);
      background-color: #f5f5f5;
      margin: 0;
      padding: 0;
      line-height: 1.5;
    }
    
    .container {
      max-width: 100%;
      padding: 0;
      overflow-x: hidden;
    }
    
    /* 顶部导航栏 */
    .navbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 44px;
      background-color: #fff;
      border-bottom: 1px solid var(--border-color);
      position: sticky;
      top: 0;
      z-index: 1000;
      padding: 0 15px;
    }
    
    .navbar-title {
      font-size: 18px;
      font-weight: 500;
      text-align: center;
      flex: 1;
    }
    
    /* 选项卡样式 */
    .tabs {
      display: flex;
      background-color: #fff;
      border-bottom: 1px solid var(--border-color);
      padding: 0 10px;
    }
    
    .tab {
      padding: 10px 15px;
      flex: 1;
      text-align: center;
      font-size: 14px;
      position: relative;
      cursor: pointer;
    }
    
    .tab.active {
      color: var(--primary-color);
      font-weight: 500;
    }
    
    .tab.active::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 20px;
      height: 3px;
      background-color: var(--primary-color);
      border-radius: 3px;
    }
    
    /* 订单卡片样式 */
    .order-card {
      background-color: #fff;
      border-radius: 8px;
      margin: 10px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
      overflow: hidden;
    }
    
    .order-header {
      padding: 12px 15px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid var(--border-color);
    }
    
    .order-content {
      padding: 15px;
      display: flex;
    }
    
    .order-footer {
      padding: 10px 15px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-top: 1px solid var(--border-color);
      background-color: #fafafa;
    }
    
    /* 订单状态标签 */
    .order-status {
      font-size: 13px;
      padding: 3px 8px;
      border-radius: 10px;
    }
    
    .status-pending {
      background-color: #FFF0E5;
      color: #FF9500;
    }
    
    .status-completed {
      background-color: #E6F7EF;
      color: var(--success-color);
    }
    
    .status-canceled {
      background-color: #F2F2F2;
      color: #8E8E93;
    }
    
    /* 图片样式 */
    .photographer-avatar {
      width: 50px;
      height: 50px;
      border-radius: 4px;
      object-fit: cover;
    }
    
    /* 按钮样式 */
    .btn {
      display: inline-block;
      border: none;
      border-radius: 4px;
      padding: 6px 12px;
      margin-left: 8px;
      font-size: 13px;
      cursor: pointer;
      text-align: center;
      text-decoration: none;
    }
    
    .btn-primary {
      background-color: var(--primary-color);
      color: white;
    }
    
    .btn-outline {
      background-color: transparent;
      border: 1px solid var(--border-color);
      color: var(--light-text);
    }
    
    /* 底部导航栏 */
    .bottom-nav {
      display: flex;
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: #fff;
      border-top: 1px solid var(--border-color);
      height: 50px;
      z-index: 1000;
    }
    
    .nav-item {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      font-size: 10px;
      color: var(--light-text);
    }
    
    .nav-item i {
      font-size: 18px;
      margin-bottom: 3px;
    }
    
    .nav-item.active {
      color: var(--primary-color);
    }
    
    /* 页面容器 */
    .page-container {
      padding-bottom: 60px;
    }
    
    /* 空状态 */
    .empty-state {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 50px 0;
      color: var(--light-text);
    }
    
    .empty-icon {
      font-size: 50px;
      color: #d9d9d9;
      margin-bottom: 15px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="navbar">
      <div class="navbar-title">我的订单</div>
    </div>
    
    <div class="tabs">
      <div class="tab active" onclick="switchTab('all')">全部</div>
      <div class="tab" onclick="switchTab('pending')">待拍摄</div>
      <div class="tab" onclick="switchTab('processing')">处理中</div>
      <div class="tab" onclick="switchTab('completed')">已完成</div>
    </div>
    
    <div class="page-container">
      <!-- 订单列表 -->
      <div class="order-list">
        <!-- 订单卡片 1 -->
        <div class="order-card" onclick="goToOrderDetail(1001)">
          <div class="order-header">
            <div>订单号: 1001</div>
            <div class="order-status status-pending">待拍摄</div>
          </div>
          <div class="order-content">
            <img src="https://img.freepik.com/free-photo/portrait-of-young-photographer_23-2148155579.jpg" alt="摄影师头像" class="photographer-avatar">
            <div style="margin-left: 15px; flex: 1;">
              <div style="font-weight: 500;">星辰摄影</div>
              <div style="font-size: 13px; color: var(--light-text); margin-top: 5px;">标准套餐 - ¥199</div>
              <div style="font-size: 13px; color: var(--light-text); margin-top: 5px;">预约时间: 2023-04-29 14:00</div>
            </div>
          </div>
          <div class="order-footer">
            <div style="font-size: 13px;">下单时间: 2023-04-25 10:30</div>
            <div>
              <button class="btn btn-outline" onclick="cancelOrder(event, 1001)">取消订单</button>
              <button class="btn btn-primary" onclick="contactPhotographer(event, 1001)">联系摄影师</button>
            </div>
          </div>
        </div>
        
        <!-- 订单卡片 2 -->
        <div class="order-card" onclick="goToOrderDetail(1002)">
          <div class="order-header">
            <div>订单号: 1002</div>
            <div class="order-status status-completed">已完成</div>
          </div>
          <div class="order-content">
            <img src="https://img.freepik.com/free-photo/side-view-woman-taking-photos_23-2149915463.jpg" alt="摄影师头像" class="photographer-avatar">
            <div style="margin-left: 15px; flex: 1;">
              <div style="font-weight: 500;">光影摄影工作室</div>
              <div style="font-size: 13px; color: var(--light-text); margin-top: 5px;">高级套餐 - ¥299</div>
              <div style="font-size: 13px; color: var(--light-text); margin-top: 5px;">拍摄时间: 2023-04-15 11:00</div>
            </div>
          </div>
          <div class="order-footer">
            <div style="font-size: 13px;">下单时间: 2023-04-10 09:15</div>
            <div>
              <button class="btn btn-outline" onclick="downloadPhotos(event, 1002)">下载照片</button>
              <button class="btn btn-primary" onclick="writeReview(event, 1002)">评价</button>
            </div>
          </div>
        </div>
        
        <!-- 订单卡片 3 -->
        <div class="order-card" onclick="goToOrderDetail(1003)">
          <div class="order-header">
            <div>订单号: 1003</div>
            <div class="order-status status-canceled">已取消</div>
          </div>
          <div class="order-content">
            <img src="https://img.freepik.com/free-photo/camera-photographic-with-smartphone-notebook_23-2148163126.jpg" alt="摄影师头像" class="photographer-avatar">
            <div style="margin-left: 15px; flex: 1;">
              <div style="font-weight: 500;">瞬间记忆摄影</div>
              <div style="font-size: 13px; color: var(--light-text); margin-top: 5px;">豪华套餐 - ¥499</div>
              <div style="font-size: 13px; color: var(--light-text); margin-top: 5px;">计划时间: 2023-04-20 15:30</div>
            </div>
          </div>
          <div class="order-footer">
            <div style="font-size: 13px;">下单时间: 2023-04-05 14:20</div>
            <div>
              <button class="btn btn-outline" onclick="deleteOrder(event, 1003)">删除订单</button>
              <button class="btn btn-primary" onclick="reorder(event, 1003)">再次预约</button>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 空状态 (默认隐藏) -->
      <div class="empty-state" style="display: none;">
        <i class="fas fa-inbox empty-icon"></i>
        <div>暂无订单</div>
        <div style="font-size: 13px; margin-top: 5px;">去首页寻找心仪的摄影师吧</div>
        <button class="btn btn-primary" style="margin-top: 15px;" onclick="goToHome()">去首页</button>
      </div>
    </div>
    
    <!-- 底部导航栏 -->
    <div class="bottom-nav">
      <div class="nav-item" onclick="goToHome()">
        <i class="fas fa-home"></i>
        <div>首页</div>
      </div>
      <div class="nav-item active" onclick="goToOrders()">
        <i class="fas fa-file-alt"></i>
        <div>订单</div>
      </div>
      <div class="nav-item" onclick="goToProfile()">
        <i class="fas fa-user"></i>
        <div>我的</div>
      </div>
    </div>
  </div>

  <script>
    // 切换订单选项卡
    function switchTab(tabName) {
      const tabs = document.querySelectorAll('.tab');
      tabs.forEach(tab => tab.classList.remove('active'));
      
      const clickedTab = document.querySelector(`.tab[onclick="switchTab('${tabName}')"]`);
      if (clickedTab) {
        clickedTab.classList.add('active');
      }
      
      // 这里可以添加筛选订单的逻辑，现在仅作为示例
      const orders = document.querySelectorAll('.order-card');
      const emptyState = document.querySelector('.empty-state');
      
      // 模拟筛选结果
      let hasVisibleOrders = false;
      
      orders.forEach(order => {
        const statusElement = order.querySelector('.order-status');
        const status = statusElement.textContent.trim();
        
        if (tabName === 'all') {
          order.style.display = 'block';
          hasVisibleOrders = true;
        } else if (tabName === 'pending' && status === '待拍摄') {
          order.style.display = 'block';
          hasVisibleOrders = true;
        } else if (tabName === 'processing' && status === '处理中') {
          order.style.display = 'block';
          hasVisibleOrders = true;
        } else if (tabName === 'completed' && status === '已完成') {
          order.style.display = 'block';
          hasVisibleOrders = true;
        } else {
          order.style.display = 'none';
        }
      });
      
      // 显示或隐藏空状态
      emptyState.style.display = hasVisibleOrders ? 'none' : 'flex';
    }
    
    // 跳转到订单详情页
    function goToOrderDetail(orderId) {
      console.log('前往订单详情页，订单ID:', orderId);
      alert('前往订单详情页（在实际小程序中会跳转）');
    }
    
    // 取消订单
    function cancelOrder(event, orderId) {
      event.stopPropagation(); // 阻止事件冒泡，避免触发卡片的点击事件
      console.log('取消订单，订单ID:', orderId);
      alert('订单已取消（在实际小程序中会有确认弹窗）');
    }
    
    // 联系摄影师
    function contactPhotographer(event, orderId) {
      event.stopPropagation();
      console.log('联系摄影师，订单ID:', orderId);
      alert('即将联系摄影师（在实际小程序中会跳转到聊天界面）');
    }
    
    // 下载照片
    function downloadPhotos(event, orderId) {
      event.stopPropagation();
      console.log('下载照片，订单ID:', orderId);
      alert('正在下载照片（在实际小程序中会下载照片）');
    }
    
    // 写评价
    function writeReview(event, orderId) {
      event.stopPropagation();
      console.log('写评价，订单ID:', orderId);
      alert('前往评价页面（在实际小程序中会跳转）');
    }
    
    // 删除订单
    function deleteOrder(event, orderId) {
      event.stopPropagation();
      console.log('删除订单，订单ID:', orderId);
      alert('订单已删除（在实际小程序中会有确认弹窗）');
    }
    
    // 再次预约
    function reorder(event, orderId) {
      event.stopPropagation();
      console.log('再次预约，订单ID:', orderId);
      alert('正在创建新订单（在实际小程序中会跳转到预约页）');
    }
    
    // 导航功能
    function goToHome() {
      console.log('前往首页');
      alert('前往首页（在实际小程序中会跳转）');
    }
    
    function goToOrders() {
      console.log('已在订单页面');
    }
    
    function goToProfile() {
      console.log('前往个人中心');
      alert('前往个人中心（在实际小程序中会跳转）');
    }
  </script>
</body>
</html> 